<template>
  <h1 class="row-title">普通引入</h1>
  <div class="row">
    <Duyi-Icon icon="house" />
    <Duyi-Icon icon="magnifying-glass" />
    <Duyi-Icon icon="check" />
    <Duyi-Icon icon="download" />
    <Duyi-Icon icon="image" />
    <Duyi-Icon icon="phone" />
    <Duyi-Icon icon="bars" />
    <Duyi-Icon icon="location-dot" />
    <Duyi-Icon icon="cloud" />
  </div>
  <h1 class="row-title">设置不同的大小</h1>
  <div class="row">
    <Duyi-Icon icon="house" size="2xs" />
    <Duyi-Icon icon="magnifying-glass" size="xs" />
    <Duyi-Icon icon="check" size="sm" />
    <Duyi-Icon icon="download" size="lg" />
    <Duyi-Icon icon="image" size="xl" />
    <Duyi-Icon icon="phone" size="2xl" />
    <Duyi-Icon icon="bars" size="2x" />
    <Duyi-Icon icon="location-dot" size="3x" />
    <Duyi-Icon icon="cloud" size="4x" />
  </div>
  <h1 class="row-title">旋转与翻转</h1>
  <div class="row">
    <Duyi-Icon icon="house" rotation="90" size="xl" />
    <Duyi-Icon icon="magnifying-glass" rotation="270" size="xl" />
    <Duyi-Icon icon="check" rotation="180" size="xl" />
    <Duyi-Icon icon="download" flip="horizontal" size="xl" />
    <Duyi-Icon icon="image" flip="vertical" size="xl" />
    <Duyi-Icon icon="phone" flip="both" size="xl" />
  </div>
  <h1 class="row-title">动画效果</h1>
  <div class="row">
    <Duyi-Icon icon="house" size="xl" beat />
    <Duyi-Icon icon="magnifying-glass" size="xl" beat-fade />
    <Duyi-Icon icon="check" size="xl" fade />
    <Duyi-Icon icon="download" size="xl" shake />
    <Duyi-Icon icon="image" size="xl" spin />
    <Duyi-Icon icon="phone" size="xl" spin spin-reverse />
    <Duyi-Icon icon="bars" size="xl" spin spin-pulse />
    <Duyi-Icon icon="location-dot" size="xl" />
    <Duyi-Icon icon="cloud" size="xl" />
  </div>
  <h1 class="row-title">添加自定义属性</h1>
  <div class="row">
    <Duyi-Icon icon="house" size="xl" type="primary" />
    <Duyi-Icon icon="magnifying-glass" size="xl" type="success" />
    <Duyi-Icon icon="check" size="xl" type="warning" />
    <Duyi-Icon icon="download" size="xl" type="info" />
    <Duyi-Icon icon="image" size="xl" type="danger" />
    <Duyi-Icon icon="phone" size="xl" color="#e47412" />
    <Duyi-Icon icon="bars" size="xl" color="#7ec102" />
    <Duyi-Icon icon="location-dot" size="xl" color="skyblue" />
    <Duyi-Icon icon="cloud" size="xl" color="rgba(122,122,122,.5)" />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>
